import Doc from '~/components/layout/docs'
import { Image } from '~/components/media'
import Caption from '~/components/text/caption'
import Example from '~/components/example'
import Note from '~/components/text/note'
import { Code } from '~/components/text/code'
import Link from '~/components/text/link'
import Snippet from '~/components/snippet'

export const meta = {
  title: 'Deploy Button',
  description:
    'The Deploy Button can be used to deploy GitHub repositories and GitLab projects to ZEIT Now.',
  editUrl: 'pages/docs/v2/more/deploy-button.mdx',
  lastEdited: '2020-01-20T20:40:45.000Z'
}

Use the deploy button to create a ZEIT Project from any GitHub repository or GitLab project, including branches and subdirectories, and optionally create a copy of the original repository in your Git account.

## Example

The example below shows how the deploy button looks when rendered, clicking it allows you to deploy the [Gatsby example](https://github.com/zeit/now/tree/master/examples/gatsby) from the [ZEIT Now repository](https://github.com/zeit/now/tree/master/examples).

<Link href="https://zeit.co/new/project?template=https://github.com/zeit/now/tree/master/examples/gatsby">
  <Image src="https://zeit.co/button" width={104} height={36} align="left" />
</Link>

## Usage

Consisting of an `.svg` asset and an associated link to a public GitHub repository or GitLab project, the deploy button can be used wherever its rendering is supported.

When implementing the deploy button, provide a link with it to the `/new/project` endpoint and pass a GitHub repository or GitLab project as the template query parameter like so:

<Snippet dark text="https://zeit.co/new/project?template=https://github.com/zeit/now/tree/master/examples/gatsby" />
<Caption>The URL for deploying GitHub repositories to ZEIT Now.</Caption>

The template parameter can be either a repository URL, or alternatively, a URL for a folder within that repository, both are supported.

By combining both the button and the `/new/project` endpoint, you can provide users with a way to deploy projects in seconds. Some common use cases are listed below.

### Markdown

To render the deploy button in a [Markdown](https://en.wikipedia.org/wiki/Markdown) file, for example a Git `README.md`, use the following code, changing only the template parameter:

```
[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/now/tree/master/examples/gatsby)
```

<Caption>The code required to add a deploy button in Markdown.</Caption>

### HTML

To use the Deploy to Now button with HTML, add the button as an image and wrap it with a link to the endpoint, changing only the template parameter:

```html
<a
  href="https://zeit.co/new/project?template=https://github.com/zeit/now/tree/master/examples/gatsby"
>
  <img src="https://zeit.co/button" alt="Deploy to ZEIT Now" />
</a>
```

<Caption>The code required to add a deploy button to a website or app.</Caption>

export default ({ children }) => <Doc meta={meta}>{children}</Doc>

export const config = {
  amp: 'hybrid'
}
